<template>
  <view>
    <view>
      <swiper class="swiper" circular indicator-dots autoplay>
        <swiper-item class="swiper-item" v-for="item in room.imageList" :key="item.id">
          <image mode="scaleToFill" :src="item" alt="" srcset="" />
        </swiper-item>
      </swiper>
    </view>
    <!-- 重要情况 -->
    <uni-grid class="item" :showBorder="false" :column="3">
      <uni-grid-item class="grid-item-box">
        <text class="item-price">¥{{room.price}}/月</text>
        <text class="grid-text">报价</text>
      </uni-grid-item>
      <uni-grid-item class="grid-item-box">
        <text class="item-price">{{room.type == '整租' ? room.houseNum + room.houseHall  : room.roomType}}</text>
        <text class="grid-text">户型</text>
      </uni-grid-item>
      <uni-grid-item class="grid-item-box">
        <text class="item-price">{{room.type == '整租' ? room.houseArea: room.roomArea}}</text>
        <text class="grid-text">房屋面积</text>
      </uni-grid-item>
    </uni-grid>

    <!-- 房屋特点 -->
    <view class="item params">
      <u-tag :text="item" mode="light" type="primary" v-for="(item,prop) in room.params" :key="prop" style="margin:10rpx;margin-top: 30rpx;" />
    </view>
    <!-- 基本情况 -->
    <uni-card class="item " title="基本情况" :border="false" :head-border-bottom="false" padding="0" title-size="38">
      <u-row>
        <u-col span="2">
          <view class="item-title">朝向</view>
        </u-col>
        <u-col span="4">
          <view class="detail">{{room.direction}}</view>
        </u-col>
      </u-row>
      <u-row>
        <u-col span="2">
          <view>装修</view>
        </u-col>
        <u-col span="4">
          <view class="detail">{{room.decoration}}</view>
        </u-col>
      </u-row>
      <u-row>
        <u-col span="2">
          <view>小区</view>
        </u-col>
        <u-col span="4">
          <view class="detail">{{room.villageName}}</view>
        </u-col>
      </u-row>
      <u-row>
        <u-col span="2">
          <view>类型</view>
        </u-col>
        <u-col span="8">
          <view class="detail">{{room.villagetype}}</view>
        </u-col>
      </u-row>
    </uni-card>
    <!-- 房源介绍 -->
    <uni-card title="房源介绍" :border="false" :head-border-bottom="false" padding="0" title-size="38">
      <u-read-more showHeight="600" :toggle="true">
        <view>
          {{room.introduce}}
        </view>
      </u-read-more>
    </uni-card>
    <u-gap height="1" bg-color="#f8f8f8"></u-gap>
    <view>
      <uni-card title="小区介绍" :border="false" :head-border-bottom="false" padding="0" title-size="38">
        <view>
          <view>建筑年份：{{room.villageyear}}</view>
          <view>建筑类型：{{room.villagetype}}</view>
          <view>绿化率：{{room.villagegreen}}%</view>
        </view>
        <image src="https://img.pconline.com.cn/images/upload/upc/tx/itbbs/1406/14/c20/35273166_1402738413857_mthumb.jpg" style="width: 750rpx;height: 400rpx;"></image>
        <u-read-more showHeight="600" :toggle="true">
          <view>
            {{room.introduce}}
          </view>
        </u-read-more>
      </uni-card>
    </view>
    <u-gap height="1" bg-color="#f8f8f8"></u-gap>
    <view>
      <uni-card title="服务介绍" :border="false" :head-border-bottom="false" padding="0" title-size="38">
        <view>
          <u-cell-group :border="false">
            <u-cell icon="heart" title="承诺-四大租住承诺，安心有保障" :arrow="false" hover-class="none" :border-bottom="false"></u-cell>
            <u-cell icon="level" title="品质-两类品质保障，入住更无忧" :arrow="false" hover-class="none" :border-bottom="false"></u-cell>
            <u-cell icon="star" title="服务-两项日常服务，生活超便捷" :arrow="false" hover-class="none" :border-bottom="false"></u-cell>
            <u-cell icon="rmb" title="付款-多种付款方式，支付更灵活" :arrow="false" hover-class="none" :border-bottom="false"></u-cell>
          </u-cell-group>
        </view>
      </uni-card>
    </view>
    <u-gap height="10" bg-color="#f8f8f8"></u-gap>
    <uni-card title="经纪人" :border="false" :head-border-bottom="false" padding="0" title-size="38">
      <uni-list>
        <uni-list-item :title="room.agentPhone" :note="room.agentName" thumb="https://web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png" thumb-size="lg">
          <template v-slot:footer>
            <button class="custom-style" open-type="share" @click="share">
              <u-icon name="share-square" size='40'></u-icon>
            </button>
          </template>
        </uni-list-item>
      </uni-list>
    </uni-card>
    <view class="bottom">
      <view class="btm-left">
        <view class="item" @click="kefu">
          <u-icon name="kefu-ermai" size='20'></u-icon>
          <view>客服</view>
        </view>
        <view class="item" @click="collect">
          <u-icon name="heart-fill" size='20' v-if="room.heart"></u-icon>
          <u-icon name="heart" size='20' v-else></u-icon>
          <text>收藏</text>
        </view>
      </view>
      <view class="btm-right" @click="tophone">
        <view class="btm-btn">联系经纪人</view>
      </view>
    </view>
    <!-- <uni-goods-nav :fill="true" :options="options" :button-group="customButtonGroup1" @click="onClick" @buttonClick="buttonClick" style="margin-top: 20px;" /> -->
  </view>
</template>

<script>
export default {
  onLoad(option) {
    this.gethousebyid(option.id)
    // 保存浏览记录
    this.saveHistory(this.room)
    // 查看是否收藏
    this.room.heart = this.isCollection(this.room)
  },
  onUnload() {
    this.saveCollection(this.room)
  },

  methods: {
    async gethousebyid(id){
       let url = `http://127.0.0.1/gethouse/${id}`
      let [, result] = await uni.request({
        url: url,
        method: 'GET'
      })
      this.room = result.data.data
    },
    saveHistory(room) {
      // console.log("111",uni.getStorageSync("historyList"))
      let historyList = JSON.parse(uni.getStorageSync('historyList') || '[]')
      // console.log("111", historyList)
      let index = historyList.findIndex((item) => {
        return item.id == room.id
      })
      if (index == -1) {
        historyList.push(room)
        uni.setStorage({
          key: 'historyList',
          data: JSON.stringify(historyList)
        })
      }
    },
    isCollection(room) {
      let collectionList = JSON.parse(uni.getStorageSync('collectionList') || '[]')
      let index = collectionList.findIndex((item) => {
        return item.id == room.id
      })
      if (index == -1) {
        return false
      }
      return true
    },
    saveCollection(room) {
			// 没有收藏不运行
      let collectionList = JSON.parse(uni.getStorageSync('collectionList') || '[]')
      let index = collectionList.findIndex((item) => {
        return item.id == room.id
      })
      if (index == -1&&room.heart) {
        collectionList.push(room)
      }
			console.log(index,room.heart)
			if (index != -1&&!room.heart){
        collectionList.splice(index, 1)
      }
      uni.setStorage({
        key: 'collectionList',
        data: JSON.stringify(collectionList)
      })
    },
    share() {
      uni.share({
        provider: 'weixin',
        scene: 'WXSceneSession',
        type: 1,
        summary: '我正在使用HBuilderX开发uni-app，赶紧跟我一起来体验！',
        success: function (res) {
          console.log('success:' + JSON.stringify(res))
        },
        fail: function (err) {
          console.log('fail:' + JSON.stringify(err))
        }
      })
    },

    kefu() {
      uni.makePhoneCall({
        phoneNumber: '1561214581'
      })
    },
    collect() {
      this.room.heart = !this.room.heart
      if (this.room.heart) {
        uni.showToast({
          icon: 'success',
          title: '收藏成功'
        })
      } else {
        uni.showToast({
          icon: 'success',
          title: '取消成功'
        })
      }
    },
    tophone() {
      // 通过微信小程序发送电话
      uni.makePhoneCall({
        phoneNumber: this.room.agentPhone
      })
    }
  },
  data() {
    return {
      // heart:"heart",
      room: {
        villageName: '',
        houseNum: '',
        houseHall: '',
        toiletNum: '',
        roomType: '',
        direction: '',
        price: '',
        introduce: '',
        heart: false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.swiper {
  height: 700rpx;
  width: 750rpx;

  image {
    height: 700rpx;
    width: 750rpx;
  }
}

.grid-item-box {
  height: 50px;
  text-align: center;
  flex: 1;
  // position: relative;
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 15px 0;
}

.params {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.item {
  .item-title {
    color: #ccc;
    font-weight: bold;
  }

  .item-price {
    font-weight: normal;
    font-size: 45rpx;
    color: #f00;
  }

  .item-desc {
    font-weight: normal;
    font-size: 36rpx;
    color: $u-tips-color;
  }

  .detail {
    font-weight: 700;
    color: #000;
  }
}

.arrow-right {
  position: absolute;
  top: 80rpx;
  right: 28rpx;
  font-weight: normal;
  font-size: 28rpx;
  color: $u-tips-color;

  .phone {
    width: 90rpx;
    height: 90rpx;
    border-radius: 100%;
    box-shadow: 0px 1px 20px 0px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

.wayClass {
  color: #606266;
  padding: 30rpx;
  line-height: 50rpx;
}

.clearBtn {
  margin: 0;
  padding: 0;
  line-height: 1;
  background-color: #ffffff;
}

.clearBtn::after {
  position: unset !important;
  border: unset;
}

.navigation {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0rpx 15rpx;
  background-color: #ffffff;
  box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.05);
  z-index: 9999;

  .left {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 38rpx;
    font-size: 14px;
    color: #6a6a6a;

    .item {
      display: flex;

      .text {
        margin-left: 4rpx;
      }
    }
  }

  .right {
    display: flex;
    font-size: 28rpx;
    align-items: center;

    .btn {
      line-height: 66rpx;
      margin-left: 30rpx;
      padding: 5rpx 50rpx;
      color: #ffffff;
      border-radius: 36rpx;
      background-color: #2979ff;
    }
  }
}

.custom-style {
  padding: 0px;
  border-width: 0px;
  border-style: none;
  background-color: #fff;
  text-align: left;
  width: 80rpx;
  height: 80rpx;
}

.bottom {
  width: 750rpx;
  height: 100rpx;
  background-color: #fff;
  display: flex;
  align-items: center;
  color: #ccc;

  .btm-left {
    flex: 3;
    display: flex;
    justify-content: space-around;

    .item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      font-size: 14px;
    }
  }

  .btm-right {
    flex: 7;
    display: flex;
    // margin-left: 10px;
    // margin-right: 20px;
    // flex-direction: column;
    align-items: center;
    justify-content: center;

    .btm-btn {
      width: 240px;
      height: 80rpx;
      line-height: 80rpx;
      border-radius: 50rpx;
      color: #fff;
      background-image: linear-gradient(90deg, #1e83ff, #0053b8);
      text-align: center;
    }
  }
}
</style>
